<template>
  <div class="container" :style="{width:`${diameter}px`,height:`${diameter}px`}">
    <template v-if="progress!=0">
        <div class="circle-progressbar" :style="{width:`${diameter}px`,height:`${diameter}px`}">
            <div class="solt" :style="{color:color}">
                <slot></slot>
            </div>
            <div class="wrapper left-wrapper" :style="{width:`${diameter/2}px`,height:`${diameter}px`}" v-show="progress!=0&&isShow">
                <div class="circle-bar" :style="{transform:BarRight,width:`${diameter}px`,height:`${diameter}px`,borderLeftColor:color,borderBottomColor:color,}" >
                    <div style="
                        position: absolute;
                        height: 8px;
                        width: 8px;
                        top: 11px;
                        left: 11px;
                        border-radius: 50%;
                    "
                    v-show="progress>50"
                    :style="`background: ${color};`"
                    >

                    </div>
                </div>
                <div style="
                    position: absolute;
                    height: 8px;
                    width: 8px;
                    top: 0px;
                    right: -4px;
                    border-radius: 50%;
                "
                :style="`background: ${color};`"
                v-show="progress!=0"
                >

                </div>
            </div>
            <div class="wrapper right-wrapper" :style="{width:`${diameter/2}px`,height:`${diameter}px`}" v-show="progress!=0">
                <div class="circle-bar" :style="{transform:BarLeft,width:`${diameter}px`,height:`${diameter}px`,borderRightColor:color,borderTopColor:color,}">
                    <div style="
                        position: absolute;
                        height: 8px;
                        width: 8px;
                        bottom: 12px;
                        right: 10px;
                        border-radius: 50%;
                    "
                    :style="`background: ${color};`"
                    v-show="progress!=0&&!isShow"
                    
                    >

                    </div>
                </div>
                
            </div>
        </div>
        <div class="circle-progressbar"  v-show="progress!=0" :style="{width:`100px`,height:`100px`}">
            <div class="wrapper left-wrapper" :style="{width:`50%`,height:`100px`}" v-show="isShow">
                <div class="circle-bar" :style="{transform:BarRight,width:`100px`,height:`100px`,borderLeftColor:colorson,borderBottomColor:colorson,}" >
                    <div style="
                        position: absolute;
                        height: 8px;
                        width: 8px;
                        top: 6px;
                        left: 5px;
                        border-radius: 50%;
                    "
                    v-show="progress>50"
                    :style="`background: ${colorson};`"
                    >

                    </div>
                </div>
                <div style="
                    position: absolute;
                    height: 8px;
                    width: 8px;
                    top: 0px;
                    right: -4px;
                    border-radius: 50%;
                "
                :style="`background: ${colorson};`"
                v-show="progress!=0&&!isShow"
                >

                </div>
            </div>
            <div class="wrapper right-wrapper" :style="{width:`50%`,height:`100px`}">
                <div class="circle-bar" :style="{transform:BarLeft,width:`100px`,height:`100px`,borderRightColor:colorson,borderTopColor:colorson,}">
                    <div style="
                        position: absolute;
                        height: 8px;
                        width: 8px;
                        bottom: 6px;
                        right: 6px;
                        border-radius: 50%;
                    "
                    :style="`background:${colorson}`"
                    v-show="progress!=0"
                    
                    >

                    </div>
                </div>
            </div>
        </div>
    </template>
    <template v-else >
        <div class="circle-progressbar" :style="{width:`${diameter}px`,height:`${diameter}px`}">
            <div class="solt" :style="{color:color}">
                <slot></slot>
            </div>
            <div class="wrapper left-wrapper" :style="{width:`${diameter}px`,height:`${diameter}px`}">
                <div class="circle-bar" :style="{width:`${diameter}px`,height:`${diameter}px`,borderColor:color}" >
                </div>
            </div>
        </div>
        <div class="circle-progressbar"  :style="{width:`100px`,height:`100px`}">
            <div class="wrapper left-wrapper" :style="{width:`100%`,height:`100px`}">
                <div class="circle-bar" :style="{width:`100px`,height:`100px`,borderColor:colorson}" >
                </div>
            </div>
        </div>
    </template>
</div>
</template>

<script>
export default {
    props:{
        progress:{
            type:Number,
            default:0,
        },
        diameter:{
            type:Number,
            default:100,
        },
    },
    data () {
        return {
            BarLeft:'',      
            BarRight:'',    
            color:'#175dff',
            colorson:'#D0DDFF',
            isShow:false,
            num:0,
            time:null,
        }
    },
    watch: {
        progress(val){
            this.changelicp(val)
        }  
    },
    methods: {
        CircleProgressBar(percent){
            if(percent >= 0 && percent <= 50){
                this.isShow=false
                this.BarLeft = `rotate(${-135 + (360/100 * percent)}deg)`
                // this.BarRight = `rotate(${-135 + (360/100 * 0)}deg)`
            }else if(percent > 50 && percent <= 100){
                this.isShow=true
                // this.BarLeft = `rotate(${-135 + (360/100 * 50)}deg)`
                this.BarRight = `rotate(${-135 + (360/100 * (percent - 50))}deg)`
            }
        },
        changelicp(val){
            clearInterval(this.time)
            this.BarLeft = `rotate(${-135 + (360/100 * 0)}deg)`
            this.BarRight = `rotate(${-135 + (360/100 * 0)}deg)`
            if(val>=100){
                this.color = '#36BE3D'
                this.colorson = '#BEF28A'
            }else{
                this.color = '#175dff'
                this.colorson = '#D0DDFF'
            }
            if(val==0){
                this.color = '#DADADD'
                this.colorson = '#F6F6F9'
            }
            this.num = 0
            this.time = setInterval(()=>{
                this.num++
                this.CircleProgressBar(this.num)
                if(this.num==val){
                    clearInterval(this.time)
                }
            },10)
        }
    },
    created () {
        this.changelicp(this.progress)
    }
}
</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    position: relative;
    /* margin: 100px auto; */
}

.circle-progressbar {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}

.circle-progressbar div {
    box-sizing: border-box;
}



.circle-progressbar .wrapper{
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.left-wrapper {
    left: 0;
}
.right-wrapper {
    right: 0;
}

.wrapper .circle-bar {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 8px solid transparent;
    border-radius: 50%;
    transform: rotate(-135deg);
    transition: transform .1s;
}

.left-wrapper .circle-bar {
    left: 0;
    border-left-color: hotpink;
    border-bottom-color: hotpink;
}

.right-wrapper .circle-bar {
    right: 0;
    border-right-color: hotpink;
    border-top-color: hotpink;
}

.solt{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 50%;
    height: 50%;
    z-index: 500;
}
</style>